@use '_variables' as v;
@use '_utils';
@use '_values' as values;
@use '_values/colors';

.filter-tags {
	display: flex;
	gap: 8px;
	overflow-x: auto;

	&::-webkit-scrollbar {
		width: 8px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: transparent;
	}

	.filter {
		@include utils.typography('Primary/BodySmall-SB');

		height: 25px;
		background: colors.$white;
		color: colors.$sui-blue-steel-dark;
		padding: 6px 10px;
		border: 1px solid colors.$sui-steel-blue;
		border-radius: 16px;
		text-decoration: none;
		display: flex;
		align-items: center;

		&.active {
			background: colors.$hero-dark;
			color: colors.$white;
			border: 1px solid transparent;
		}
	}
}
